<template>
  <div class="container">
    <Calendar
      backgroundText
      selectMode="range"
      class-name="monthRange-mode"
      mode="monthRange"
      :lunar="lunar"
      :monFirst="true"
      :disabled="disabled"
      :monthRange="monthRange"
    />
  </div>
</template>

<script>
import { ref } from "vue";
import Calendar from "mpvue-calendar";
import lunar from "mpvue-calendar/dist/lunar";

export default {
  name: "app",
  components: {
    Calendar,
  },
  setup() {
    // 方法-禁止的日期
    function setDisableDay(year, month, count, days) {
      for (var i = 1; i <= count; i++) {
        if (days.length != 0 && days.length % 2 == 0) {
          i += 2;
        }
        var day;
        if (month < 12) {
          day = ref(`${year}-${month}-${i - 1}`);
        } else {
          day = ref(`${year + 1}-${month - 12}-${i - 1}`);
        }
        days.push(day.value);
      }
    }
    // 方法-显示的日期
    function getShowDate(year, month) {
      var range;
      if (month < 12) {
        range = `${year}-${month}`;
      } else {
        range = `${year + 1}-${month - 12}`;
      }
      return range;
    }
    // 年月日
    var today = new Date();
    let year = today.getFullYear();
    let now = today.getMonth() + 1;
    let next = now + 1;
    let three = next + 1;
    var days = [];
    // 要禁止的当月
    setDisableDay(year, now, new Date(year, now, 0).getDate(), days);
    // 要禁止的下月
    setDisableDay(year, next, new Date(year, next, 0).getDate(), days);
    // 要禁止的下下月
    setDisableDay(year, three, new Date(year, three, 0).getDate(), days);

    //汇总要显示的日历
    const disabled = days;
    const monthRange = ref([getShowDate(year, now),getShowDate(year, next),getShowDate(year, three)]);
    return {
      lunar,
      disabled,
      monthRange,
    };
  },
};
</script>

<style lang="less">
body,
html {
  background-color: #fbf9fe;
  margin: 0;
  padding: 0;
}
.container {
  width: 100%;
  margin: 0 auto;
}
.monthRange-mode {
  &.mpvue-calendar {
    width: 380px;
    margin: 0 auto;
    flex: none;
  }
}
</style>